<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="actionStatus == 'edit' ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="修改原因" v-bind="validateInfos.alter_cause">
            <!-- <a-textarea
							placeholder="请输入修改原因"
							style="width: 80%"
							allow-clear
							v-model:value="form.alter_cause"
						/> -->
            <a-select
              style="width: 80%"
              optionFilterProp="label"
              :options="options"
              allow-clear
              autocomplete="off"
              placeholder="请选择"
              v-model:value="form.alter_cause"
              @change="change"
            />
            <img
              src="@/assets/set.png"
              style="
                width: 30px;
                height: 30px;
                margin-left: 20px;
                cursor: pointer;
              "
              @click="reasonListShow = true"
            />
          </a-form-item>
          <a-form-item label="业务日期" v-bind="validateInfos.business_time">
            <a-date-picker
              style="width: 80%"
              value-format="YYYY-MM-DD HH:mm:ss"
              show-time
              autocomplete="off"
              placeholder="请选择业务日期"
              v-model:value="form.business_time"
            />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea
              style="width: 80%"
              placeholder="请输入备注"
              allow-clear
              v-model:value="form.note"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <reason-list
      v-if="reasonListShow"
      v-model:visible="reasonListShow"
      @getReason="getList"
    />
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import reasonList from './reasonList.vue';
  import { receipts_purchase_detail } from '@/api/jewelry/receipts_alter_goods';
  import { get_reason_list } from '@/api/jewelry/receipts_return';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑edit/新建add
    actionStatus: String,
    // 编辑数据id
    editData: Object
  });

  const emit = defineEmits(['done', 'update:visible']);

  const reasonListShow = ref(false);

  // 提交状态
  const loading = ref(false);
  const options = ref([]);
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 9999
  });
  onMounted(() => {
    if (props.editData.code) {
      form.code = props.editData.code;
      receipts_purchase_detail({ code: props.editData.code }).then((res) => {
        Object.keys(form).forEach((key) => {
          form[key] = res.receipts_detail ? res.receipts_detail[key] : '';
        });
      });
    }
    getList();
  });

  const getList = () => {
    get_reason_list({
      page: tablePage.currentPage,
      page_size: tablePage.pageSize
      /* filters: {
        receipts_type: 7
      } */
    })
      .then((res) => {
        options.value = [];
        res.data.forEach((item) => {
          options.value.push({
            label: item.content,
            value: item.id.toString()
          });
        });
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const change = (e) => {
    form.alter_cause = e;
  };

  // 表单数据
  const form = reactive({
    code: '',
    alter_cause: null,
    business_time: '',
    note: ''
  });
  // 表单验证规则
  const rules = reactive({
    alter_cause: [
      {
        required: true,
        message: '请输入修改原因',
        trigger: 'change'
      }
    ],
    business_time: [
      {
        required: true,
        message: '请选择业务日期',
        trigger: 'change'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);
  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        emit('done', form);
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
